<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <title>Document</title>

</head>

<body>
  <!-- <div class="head">
    <h1>个人客户/余额支付</h1>
  </div> -->
  <!-- <div class="databox"> -->
  <div id="databox">
    <div style="width: 50%;margin: 0 auto;">
    <div style="height: 80px;width: 100%; line-height: 80px;font-size: 20px;">XXX支付公司</div>
    <div class="radiobox">
      <div class="radio">
        <div class="radiocenter">
          <input id="radio-1" name="radio" type="radio" checked>
          <label for="radio-1" class="radio-label">
            <div class="raido_data">
              <div class="raido_data1">账户余额：</div>
              <span id="Balance" style="color: #29a576;font-size: 20px;">80000.00</span>元
              <span class="HideBalance">&ensp;&ensp;&ensp;&ensp;隐藏</span>
            </div>
          </label>
        </div>
      </div>
    </div>
    <div class="radio">
      <div class="radiocenter">
        <input id="radio-2" name="radio" type="radio">
        <label for="radio-2" class="radio-label">
          <div class="raido_data">
            <div class="raido_data1">农业银行</div>
            <div class="raido_data2">**** **** **** 7756</div>
            <div class="raido_data3">信用卡 | 快捷</div>
          </div>
        </label>
      </div>
    </div>
    <div class="radio">
      <div class="radiocenter">
        <input id="radio-3" name="radio" type="radio">
        <label for="radio-3" class="radio-label">
          <div class="raido_data">
            <div class="raido_data1">农业银行</div>
            <div class="raido_data2">**** **** **** 7756</div>
            <div class="raido_data3">信用卡 | 快捷</div>
          </div>
        </label>
      </div>
    </div>
    <div class="radio">
      <div class="radiocenter">
        <input id="radio-4" name="radio" type="radio">
        <label for="radio-4" class="radio-label">
          <div class="raido_data">
            <div class="raido_data1">农业银行</div>
            <div class="raido_data2">**** **** **** 7756</div>
            <div class="raido_data3">信用卡 | 快捷</div>
          </div>
        </label>
      </div>
    </div>
    <div class="radio">
      <div class="radiocenter">
        <input id="radio-5" name="radio" type="radio">
        <label for="radio-5" class="radio-label">
          <div class="raido_data">
            <div class="raido_data1">农业银行</div>
            <div class="raido_data2">**** **** **** 77asdasd56</div>
            <div class="raido_data3">信用卡 | 快捷</div>
          </div>
        </label>
      </div>
    </div>
    <div class="radio">
      <div class="radiocenter">
        <div class="raido_data">
          <div id="addbank" style="height: 20px;float: left;margin-left: 50px;color: #05b6e8">+添加银行卡</div>
        </div>
      </div>
    </div>
    <a id="orderpay" style="cursor: pointer;color: #05b6e8">其他付款方式</a>
  </div>
</div>
  <div class="paypass">
    <div style="width: 50%;margin: 0 auto;">
    <div style="padding-top: 5px">支付密码：<input id="payinput" placeholder="请输入密码" type="password">
      <a style="margin-left: 10px;color: #05b6e8" href="#">忘记密码？</a></div>
    <div class="needcode">
      <br>
      <div style="padding-top: 5px">手机号码：13300001111
        <input id="codebt" type="button" value="获取验证码"></div>
      <br>
      <div style="padding-top: 5px">验证码：&ensp;&ensp;<input id="codeinput" placeholder="请输入验证码" type="text">
      </div>
    </div>

    <br>
    <input id="paybutton" type="button" value="确认支付">
  </div>
  </div>
  <!-- </div> -->

</body>

</html>
<script>
  $("#orderpay").click(function () {
    $(location).attr('href', './Modeofpay.html');
  });
  $("#addbank").click(function () {
    $(location).attr('href', './addbankcard.html');
  });
  var str1 = $("#Balance").html();
  $(".HideBalance").click(function () {
    if ($("#Balance").html() != "x.xx") {
      $("#Balance").text('x.xx');
      $(".HideBalance").text('显示');
    } else if ($("#Balance").html() == "x.xx") {
      $("#Balance").text(str1);
      $(".HideBalance").text('隐藏');
    }
  });


  $('#codebt').click(function () {
    var count = 30;
    var countdown = setInterval(CountDown, 1000);

    function CountDown() {
      $("#codebt").attr("disabled", true);
      $("#codebt").css("color", "#ccc");
      $("#codebt").css("border", "1px solid #ccc");
      $("#codebt").val(count + "秒后可以重新发送");
      if (count == 0) {
        $("#codebt").val("获取验证码").removeAttr("disabled");
        $("#codebt").css("color", "#29a576");
        $("#codebt").css("border", "1px solid #29a576");
        clearInterval(countdown);
      }
      count--;
    }
  });

  $(document).ready(function () {
    console.log($(".bankcardid").html());

    var str2 = $(".bankcardid").html();
    $(".bankcardid").text('**** **** **** *** ' + str2.substr(str2.length - 4));
  });

</script>
<style>
  * {
    padding: 0;
    margin: 0;
  }
body{
  background-color: #f0f0ef;
}
  a {
    text-decoration: none;
    color: #0080ff;
  }

  .raido_data {
    display: flex;
    width: 100%;
  }

  .raido_data1 {
    float: left;
  }

  .raido_data2 {
    margin-left: 50px;
    width: 230px;
  }

  .raido_data3 {
    float: right;
    color: #ccc;
  }

  .radio-label {
    display: flex;
  }

  .head {
    width: 100%;
    height: 80px;
    text-align: center;
    background-color: #FFF;
    line-height: 80px;
  }

  .databox {
    width: 80%;
    height: 80vh;
    background-color: #FFF;
    margin-left: 10%;
    margin-top: 50px;
  }

  #databox {
    width: 80%;
    height: 50vh;
    background-color: #FFF; 
    margin-left: 10%;
  }


  .radio {
    margin-bottom: 10px;
    width: 100%;
    height: 4vh;
    border: 1px solid #ccc;
    line-height: 17px;
  }

  .radiocenter {
    margin-top: 1vh;
    display: flex;
  }

  .radio input[type="radio"] {
    /* position: absolute; */
    opacity: 0;
  }

  .radio input[type="radio"]+.radio-label:before {
    margin-left: 10px;
    float: left;
    content: '';
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;

    width: 1.3em;
    height: 1.2em;
    position: relative;
    top: -0.2em;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
  }

  .radio input[type="radio"]:checked+.radio-label:before {
    background-color: #3197EE;
    box-shadow: inset 0 0 0 4px #f4f4f4;
  }

  .radio input[type="radio"]:focus+.radio-label:before {
    outline: none;
    border-color: #3197EE;
  }

  .paypass {
    /* width: 100%;
    height: 20%; */

    /* margin-top: 5vh; */
    width: 80%;
    height: 50vh;
    background-color: #FFF;
    margin-left: 10%;
  }

  #payinput {
    width: 195px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 5px;
  }

  #codeinput {
    width: 195px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding-left: 5px;
  }

  #paybutton {
    width: 100px;
    height: 40px;
    font-size: 16px;
    background: #3197EE;
    color: #FFF;
    border-radius: 5px;
    margin-left: 150px;
    border: 1px solid #3fbdf3;
    cursor: pointer;
  }

  #codebt {
    width: 120px;
    height: 30px;
    font-size: 14px;
    background: #fff;
    color: #05b6e8;
    border-radius: 3px;
    margin-left: 105px;
    border: 1px solid #05b6e8;
    cursor: pointer;
  }

  #paybutton :hover {
    width: 1100px;
    background: #64b1ff;
  }

  #addbank {
    cursor: pointer;
  }

  .HideBalance {

    cursor: pointer;
    color: #05b6e8;
  }

</style>
